// 饼图占比图(1楼-加工鱼类占比、2楼-累计出库占比)

import { useECharts } from '@/hooks/useECharts';
import { EChartsOption } from 'echarts/types/dist/shared.d.ts';
import { useEffect } from 'react';

import type { proporDataType } from './typing';
interface BarChartProps {
  // 饼图系列的数据
  proporData: proporDataType.StateType;
}

export const PieChartProportion = ({ proporData }: BarChartProps) => {
  const { chartRef: barRef, chartInstanceRef: barChart } = useECharts();

  const { seriesData } = proporData;
  // console.log(seriesData, 'seriesData');
  const seriesDataValTotal = seriesData.reduce(
    (total, current) => total + current.value,
    0,
  );
  const typeNum = seriesData.length;

  useEffect(() => {
    barChart.current?.setOption({
      textStyle: {
        // fontFamily: 'AlibabaPuHuiTi', // 字体类型
    },
      tooltip: {
        trigger: 'item',
        backgroundColor: '#233346', // 背景色
        borderWidth: 0,
        textStyle: {
          color: '#fff',
        },
      },
      color: ['#1FE7E7', '#288DFF', '#6172FD', '#FFAA08', '#FA5151'],
      legend: {
        orient: 'vertical',
        
        right: '3%',
        top: 'center',
        icon: 'rect',
        itemWidth: 7,
        itemHeight: 7,
        // itemGap: 5,
        formatter: function (name) {
          const item = seriesData.find((item) => item.name == name);
          const val = item ? item.value : 0;
          const per =
            seriesDataValTotal == 0
              ? '0'
              : ((val / seriesDataValTotal) * 100).toFixed(2);
          console.log(per, 'per');
          // `{name|${name}} {a|${per}%}`
          return `{name|${name}} {a|${per}}`+'%'
        },
        textStyle: {
          color: '#96A9BA',
          fontSize: '.14rem',
          rich: {
            name: {
              width: 45,
              align: 'left',
              fontSize: '.16rem',
          },
            a: {
              color: '#fff',
              // padding: [0, 10,0,15],
              fontSize: '.16rem',
              width: 20,
                    align: 'right'
            },
          },
        },
      },
      series: [
        {
          type: 'pie',
          data: [],
          radius: ['69%', '70%'],
          center: ['30%', '50%'],
          emptyCircleStyle: {
            // 占位圆样式。
            color: '#5F666C',
          },
        },
        {
          // name: 'Access From',
          type: 'pie',
          radius: ['50%', '62%'],
          center: ['30%', '50%'],
          avoidLabelOverlap: false,
          padAngle: 2,
          itemStyle: {
            // borderRadius: 10
          },
          label: {
            show: true,
            position: 'center',
            formatter: function () {
              return '{a|' + typeNum + '}' + '种\n品类';
            },
            textStyle: {
              color: '#96A9BA',
              fontSize: '.16rem',
              rich: {
                a: {
                  color: '#fff',
                  padding: [0, 4, 14, 4],
                  fontSize: '.4rem',
                },
              },
            },
          },
          emphasis: {
            label: {
              show: false,
              fontSize: '.3rem',
              fontWeight: 'bold',
            },
          },
          labelLine: {
            show: false,
          },
          data: seriesData,
        },
      ],
    } as EChartsOption);
  }, [barChart, seriesData]);

  return <div style={{ height: '100%' }} ref={barRef}></div>;
};
